<template>
  <div class="flex gap-[8px] text-[#666] flex-wrap">
    <div
      class="border border-[#999] rounded px-[8px] py-[8px] flex justify-center items-center"
    >
      <SvgIcon
        class="mr-[2px] text-[50px] text-[var(--info-color)] inline"
        icon-class="info"
      />
      <span class="mr-[4px]">CNY</span>
      <span class="text-[#3487ff]">{{ totalList?.total || 0 }}</span>
    </div>
    <div
      class="border border-[#999] rounded px-[8px] py-[8px] flex justify-center items-center gap-[8px]"
      v-for="item in totalList?.balances || []"
      :key="item"
    >
      <div>
        <div>
          <span class="mr-[8px]">原币:</span>
          <span class="mr-[4px]">{{ item.currency }}</span>
          <span
            :class="item.balance >= 0 ? 'text-[#3487ff]' : 'text-[#e50517]'"
            >{{ item.balance }}</span
          >
        </div>
        <div>
          <span class="mr-[4px] ml-[39px]">CNY</span>
          <span
            :class="
              item.localBalance >= 0 ? 'text-[#3487ff]' : 'text-[#e50517]'
            "
            >{{ item.localBalance }}</span
          >
        </div>
      </div>
      <div>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="`参考汇率: ${performOperation('divide', item.localBalance, item.balance,4)}`"
          placement="top"
        >
          <SvgIcon
            class="mr-[2px] text-[30px] text-[var(--info-color)] inline pointer"
            icon-class="info"
          />
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import { performOperation } from "@/utils/currencyHelper.js";
const props = defineProps({
  totalList: { type: Object, default: () => ({}) },
});
</script>
<style lang="scss" scoped></style>
